<template>
  <div class="float">
    <UserIntroduction class="introduction" :userId="nodeData.userId">
      <template slot="call">
        <button id="call">私信</button>
      </template>
      <template slot="attention">
        <button id="attention" @click="followIncident">
          {{ followId ? "取消关注" : "关注" }}
        </button>
      </template>
    </UserIntroduction>
    <!-- 该用户最近5篇的笔记 -->
    <ul>
      <li v-for="item in nodes" :key="item.id" @click="toNodeDetail(item)">
        <NodeLi :nodeData="item" class="nodeLi" />
      </li>
    </ul>
  </div>
</template>

<script>
import NodeLi from "@/components/nodeListValue/NodeLi.vue";
import UserIntroduction from "@/components/userSpaceValue/UserIntroduction.vue";
import { getCookie } from "@/tool/ToolCookie";
export default {
  data() {
    return {
      nodeData: {
        nodeId: this.$route.query.id,
        nodeName: this.$route.query.nodename,
        nodeClass: this.$route.query.className,
        nodeLanguage: this.$route.query.language,
        author: this.$route.query.username,
        nodeDay: this.$route.query.time,
        popularity: this.$route.query.popularity,
        text: this.$route.query.description,
        userId: this.$route.query.userId,
      },
      nodes: [],
      // 关注关系id，默认为0，没有关注
      followId: 0, 
    };
  },
  computed:{
    followIncident(){
      if (this.followId) return this.notFollow
      return this.follow
    }

  },
  components: {
    UserIntroduction,
    NodeLi,
  },
  methods: {
    // 点击笔记跳转
    toNodeDetail(item) {
      const routeData = this.$router.resolve({
        path: "/nodeDetail",
        query: {
          // 将笔记数据传递给跳转的路由，便于显示对应笔记的内容
          className: item.className,
          id: item.id,
          language: item.language,
          nodename: item.nodename,
          popularity: item.popularity,
          time: item.time,
          username: this.$route.query.username,
          userId: item.userId,
          description: item.description,
        },
      });
      window.open(routeData.href, "_blank");
    },
    // 点击关注事件，发送请求
    follow() {
      // 判断该用户是否登录
      if (!getCookie("userId")) {
        alert("请登录后再进行关注操作");
        return;
      }
      // 判断是否是自己关注自己
      if (getCookie("userId") == this.$route.query.userId) {
        alert("无法关注您自己，去看看其他人的笔记吧");
        return;
      }
      // 发送请求，关注当前笔记的作者
      this.$axios({
        method: "post",
        url:
          "http://localhost:8181/follow/attentionById/" +
          getCookie("userId") +
          "/" +
          this.$route.query.userId,
      }).then(
        (res) => {
          console.log(res);
          if (res.data) {
            alert("关注成功！");
            this.followId = res.data
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 点击取消关注事件，发送请求
    notFollow() {
      this.$axios({
        method: "post",
        url: "http://localhost:8181/follow/notAttentionById/" + this.followId,
      }).then(
        (res) => {
          console.log(res);
          if(res.data) {
            alert("成功取消关注！")
            this.followId = 0
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },
  mounted() {
    // 获取该用户的五篇笔记
    this.$axios({
      method: "post",
      url:
        "http://localhost:8181/node/findLatelyForFive/" +
        this.$route.query.userId,
    }).then(
      (res) => {
        this.nodes = res.data.data.nodes;
      },
      (err) => {
        console.log(err);
      }
    );
    // 判断访问用户是否登录
    if(getCookie("userId")==null) {
      return // 若未登录，就不判断是否关注
    }
    // 获取登录用户和该笔记作者的关注关系(是否关注)
    this.$axios({
      method: "post",
      url:
        "http://localhost:8181/follow/whetherAttention/" +
        getCookie("userId") +
        "/" +
        this.$route.query.userId,
    }).then(
      (res) => {
        this.followId = res.data;
      },
      (err) => {
        console.log(err);
      }
    );
  },
};
</script>

<style scoped>
#main {
  height: 115px;
}
.introduction >>> img {
  top: 5px;
  height: 100px;
  width: 100px;
}
.introduction >>> h2 {
  font-size: xx-large;
  left: 130px;
}
.introduction >>> p {
  display: none;
}

.introduction >>> ul {
  left: 130px;
  top: 50px;
}

.introduction >>> li {
  margin-right: 5px;
  padding-right: 5px;
}

.introduction >>> .compile {
  display: none;
}
button {
  background: none;
  height: 30px;
  width: 80px;
  border: solid #55556d 0.5px;
  border-radius: 20px;
  color: #fff;
  cursor: pointer;
  bottom: 5px;
}
button:hover {
  background-color: #2ecc71;
  border-color: #2ecc71;
}

#call {
  position: absolute;
  right: 95px;
}
#attention {
  position: absolute;
  right: 5px;
}
ul {
  list-style: none;
}
.nodeLi >>> #introduction,
.nodeLi >>> #author {
  display: none;
}
.nodeLi {
  height: 85px;
}
.nodeLi >>> h2 {
  font-size: x-large;
}
.nodeLi >>> #class,
.nodeLi >>> #language,
.nodeLi >>> #popularity,
.nodeLi >>> #day {
  font-size: medium;
}
.nodeLi >>> #language {
  left: 60px;
}
.nodeLi >>> #day {
  right: 70px;
}
.nodeLi >>> #popularity {
  font-size: large;
  bottom: 5px;
  right: 10px;
}
.nodeLi >>> #popularity span {
  font-size: x-large;
}
</style>